<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            1、页面的HTML布局格式的思路整理
            2、CSS的样式还有很多，可以注意自行扩展  ==> 社区网站 MDN
                https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#%E7%B4%A2%E5%BC%95
            3、HTML+CSS+JS 综合开发的思路和想法
        */

        /*  
            HTML5:html第五个版本语法发布后， 后续再有的更新都被叫做HTML5
            CSS3:CSS3第三个版本语法发布后， 后续再有的更新都被叫做CSS3
            ES6:ECMAScript2015版本语法发布后，后续每年更新的JS语法都被叫做ES6
            ---------
            css4.2 变量语法 = 和动态样式语言规则类似，可以定义变量
        */
        /* 在全局环境下定义变量 */
        :root {
            /* 声明变量 */
            --radius: 12px;
        }

        .user-list {
            display: flex;
            flex-flow: row wrap;
        }

        .user-card {
            width: 300px;
            display: flex;
            flex-flow: row nowrap;
            box-shadow: 0 0 10px #999;
            /* border-radius: 12px; */
            /* var(变量名) 完成变量调用 */
            border-radius: var(--radius);
            margin: 20px;
        }

        .user-card .head {
            /* 关闭压缩比 */
            flex-shrink: 0;
            width: 120px;
            overflow: hidden;
            /* border-radius: 12px; */
            /* var(变量名) 完成变量调用 */
            border-radius: var(--radius);
        }

        .user-card .head img {
            width: 100%;
            height: 100%;
            /* object-fit: scale-down; */
            /* img 标签的图片展示方式 */
            object-fit: cover;
            /* img 标签的图片定位方式 */
            object-position: center;
        }

        .user-card .info {
            /* 弹性盒子的问题修复 */
            width: 0;
            flex-shrink: 0;
            flex-grow: 1;
            font-size: 14px;
            padding: 12px;
            /* 以倍数方式构建行间距 */
            line-height: 1.6;
        }

        .user-card .info .row {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
            min-width: 100%;
        }

        .user-card .info .row:hover {
            background-color: black;
            color: white;
            padding: 0px 10px;
            margin-left: -10px;
            border-radius: 8px;
            box-shadow: 0 0 6px #999;
            /* unset 删除用户定义样式，恢复浏览器默认样式 */
            overflow: unset;
            /* fit-content 按照内容填充，优先权高于弹性盒子 */
            width: fit-content;
        }

        .user-card .info .row span:first-child {
            color: #999;
            display: inline-block;
            width: 60px;
            /* 文本内容两端对齐 */
            text-align: justify;
            /* 为两端对象增加行位换行符 */
            text-align-last: justify;
        }

        .user-card .info .row span:last-child::before {
            content: ":";
            padding: 0px 4px;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <!-- 
        BFC: 将某一个元素转换为独立的样式运行容器，在该该容器内部的所有子元素定义的样式不会超出容器的范围 
            ==> Block Formatting Context ==> html的元素结构定义(BFC:B 块 F 格式化元素 C 元素内容)
    -->
    <div class="user-list">
        <!-- <div class="user-card">
            <div class="head">
                <img src="https://api.ixiaowai.cn/mcapi/mcapi.php" alt="" srcset="">
            </div>
            <div class="info">
                <div class="row">
                    <span>编号</span>
                    <span>123123123111111111111111111111</span>
                </div>
                <div class="row">
                    <span>姓名</span>
                    <span>张三</span>
                </div>
                <div class="row">
                    <span>性别</span>
                    <span>女</span>
                </div>
                <div class="row">
                    <span>手机号码</span>
                    <span>11111111111</span>
                </div>
            </div>
        </div> -->
    </div>

    <script src="../assets/mock/mock-min.js"></script>
    <script>
        function loadUserList() {
            return Mock.mock({
                state: true,
                msg: "成功",
                "users|10": [
                    {
                        No: "@id",
                        name: "@cname",
                        "sex|1": ["男", "女", "未知"],
                        tel: /^(1[0-9]{10})$/,
                        img: "https://api.ixiaowai.cn/mcapi/mcapi.php?_=@datetime(T)"
                    }
                ]
            })
        }

        let users = loadUserList().users;
        let temp = "";
        users.forEach(function (u) {
            temp += `
            <div class="user-card">
                <div class="head">
                    <img src="${u.img}p" alt="" srcset="">
                </div>
                <div class="info">
                    <div class="row">
                        <span>编号</span>
                        <span>${u.No}</span>
                    </div>
                    <div class="row">
                        <span>姓名</span>
                        <span>${u.name}</span>
                    </div>
                    <div class="row">
                        <span>性别</span>
                        <span>${u.sex}</span>
                    </div>
                    <div class="row">
                        <span>手机号码</span>
                        <span>${u.tel}</span>
                    </div>
                </div>
            </div>
            `
        });
        let listBox = document.querySelector(".user-list");
        listBox.innerHTML = temp
    </script>
</body>

</html>